To further expand the feedback module, described in Section~\ref{feedback},  we decided to include a bookmarklet in our solution that will allow users to \textit{``like''} Wikipedia pages even when they are not logged in to the website. We decided to name our bookmarklet to make it more fun, coming up with the name \textit{Poppix.} This section details its design and implementation issues.

\subsubsection{Design}

When designing the bookmarklet, we imposed a set of requirements that would result to a successful implementation. These are outlined below:

\begin {enumerate}
\item{It should not require any sort of login input from the user. That should be performed behind the scenes.}
\item{It should not expose any sensitive data about the user.}
\item{It should only allow the user to \textit{``like''} supported sites, i.e Wikipedia, but still perform the rest of its functions properly.}
\item{It should have a small footprint, load and execute fast and give feedback to the user throughout the \textit{``liking''} procedure.}

\end{enumerate}

The bookmarklet offers three functionalities:

\begin{itemize}

\item{\textbf{``I like this page!'':} The user is able to like a page they have visited. Liking a page will affect their profile in the same way as liking a recommendation in the iSquirrel website.}
\item{\textbf{``Shuffle me up!'':} Based on the user's profile, we select a random relevant page and redirect the user there. It works in a similar manner as StumbleUpon\footnote{StumbleUpon website: \href{http://www.stumbleupon.com}{http://www.stumbleupon.com}}, a famous browser extension.}
\item{\textbf{``Go to my profile'':} Clicking on this button, the user gets logged in the iSquirrel website. It offers a shortcut to the traditional way of logging in.}

\end{itemize}

\subsubsection{Implementation}
 
After a successful registration, the user is assigned a unique token computed using the SHA algorithm which will be used to identify them when performing actions through the bookmarklet. They then land on a \textit{Success} page, where they are prompted to drag and drop the generated bookmarklet\footnote{The bookmarklet JavaScript code is generated by the system and then obfuscated to avoid the ease of exposing any user data. } on their favourites toolbar.

When clicking on the bookmarklet, a Javascript library is embedded into the DOM of the currently displayed web page which causes a popup to appear in the middle of the screen at a fixed position. 

\subsubsection{Communication with the server}
 
Since cross-domain AJAX requests are not allowed due to the same-origin security policy
\footnote{\href{https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript}{https://developer.mozilla.org/En/Same\_origin\_policy\_for\_JavaScript}} of client-side programming languages we have used an alternative way to perform communication from the bookmarklet to the server. 

An \textit{iframe} element is created and embedded in the popup structure. It is then used to execute a GET request to the server, which then receives a response based on the type and result of the request and displays it to the user. Figure ~\ref{marklet} illustrates the aforementioned communication model.

While \textit{``liking''} a page works well under this model, \textit{``shuffling''} is still not fully functional because of the same-origin policy mentioned above. Since the \textit{iframe} is served from our domain, if the bookmarklet is loaded on a different domain (i.e a Wikipedia page), the contents of the \textit{iframe} and hence the random recommendation produced by our server  cannot be accessed. We planned on implemented a different solution but given the time constraints we were under, we came up short on time. Our proposed solution is mentioned in Chapter~\ref{ch6}.

\begin{figure}[H]
 \label{marklet}
  \includegraphics{resources/bookmarkletimg.pdf}                
  \caption{Communication between user, bookmarklet and server. \label{marklet}}
\end{figure}

